import React from 'react';
import { Link } from 'react-router-dom';
import {
  FormOutlined,
  DeleteOutlined,
  AuditOutlined,
} from '@ant-design/icons';
import { config } from '~/config/config';

const getColumns = (props: any) => {
  const columns = [
    {
      title: 'Institution Introduction',
      dataIndex: 'organizationName',
      key: 'organizationName',
      width: '40%',
      render: (_text: string, row: any) => (
        <Link to={`/institution/detail?id=${row.id as string}`} className="avatar-wrap">
          {
            row.organizationLogo
              ? <span className="avatar bg-gray-100">
                <img
                  className="avatar-img"
                  src={`${config.ossUrl}${row.organizationLogo as string}`}
                />
              </span>
              : <span className="avatar bg-gray-100">&nbsp;</span>
          }

          <div className="flex flex-col ml-4">
            <div>{row.organizationName}</div>
            <div className="text-xs text-gray-500">{row.orgnisationIntroduction}</div>
          </div>
        </Link>
      ),
    },
    {
      title: 'Industry/Main business',
      dataIndex: 'specialityName',
      key: 'specialityName',
      width: '15%',
      render: (_text: string, row: any) => (
        <div className="flex flex-col">
          <div>{row.industryName}</div>
          <div className="text-xs text-gray-500">{row.specialityName}</div>
        </div>
      ),
    },
    {
      title: 'Institution Type',
      dataIndex: 'orgTypeName',
      key: 'orgTypeName',
      width: '15%',
    },
    {
      title: 'Progress',
      key: 'statusName',
      dataIndex: 'statusName',
      width: '10%',
    },
    {
      title: 'Actions',
      key: 'action',
      width: '10%',
      render: (_text: any, row: any) => (
        <span>
          <Link to={`/institution/edit?id=${row.id as string}`}
            className="cursor-pointer text-gray-500 mr-4"
          >
            <FormOutlined />
          </Link>

          {/* 1待审核 2审核通过 3驳回 */}
          {
            (() => (
              row.status === 1 ? <span
                className="cursor-pointer text-gray-500 mr-4"
                onClick={() => props.showAuditModal(row.id as string)}
              >
                <AuditOutlined/>
              </span> : <></>
            ))()
          }

          <span
            className="cursor-pointer text-gray-500"
            onClick={() => props.deleteItem(row.id)}
          >
            <DeleteOutlined />
          </span>
        </span>
      ),
    },
  ];

  return columns;
};

export { getColumns };
